<template>
	<!-- 页面头部返回和搜索图标，标题 -->
	<SkeletonScreen v-if="loading"></SkeletonScreen>
	<my-Back-search :yesSearch="false">
		<template #back>
			<navigator url="/pages/search/search">
				<uni-icons type="search" size="28" color="#ff0000"></uni-icons>
			</navigator>
		</template>
		<template #time>
			<view>正在热播</view>
		</template>
		<template #search>
			<navigator url="/pages/search/search">
				<uni-icons type="search" size="28" color="#ff0000"></uni-icons>
			</navigator>

		</template>
	</my-Back-search>

	<!-- 下列内容 -->
	<scroll-view scroll-y class="swiper-topic-list" @scrolltolower="onBottumLoading">

		<!-- 带小图的轮播图 -->
		<view class="swiper-img">
			<imgsBanner-tag :imgList='imgList' duration='500' autoplay="true" interval="5000" :currentImg='currentImg'
				:isShowSmallImgs='true' customizeDisplayField='url' @change='onChange'></imgsBanner-tag>
		</view>

		<!-- 带轮播图和图片 -->
		<view class="image-eight-Three">
			<my-Swiper-min-max v-for="item in imgListThrea" :urlId="item.id" :bifen="item.bifen"
				:minImages="item.images" :images="item.imageUrl" :tags="item.tags" :yurt="item.yurts" :name="item.name"
				:year="item.year" :biao="item.biao"></my-Swiper-min-max>
		</view>
	</scroll-view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		swiperimgsBanner,
		userCollent
	} from '@/API/yesVideoApis.js';
	// 带小图的轮播图
	const imgList = ref([]);
	// 下部内容
	const imgListThrea = ref([]);
	const nextPage = ref(1);
	const loading = ref(true)
	// 轮播图数据
	const SwiperlistAImg = async () => {
		let res = await swiperimgsBanner(1, 8);
		imgList.value = res.data.list;
		loading.value = false
	}
	// 轮播图数据
	SwiperlistAImg();

	// 下部图数据
	const SwiperlistBImg = async (pageNum, pageSize) => {
		let res = await swiperimgsBanner(pageNum, pageSize);
		console.log("swiperImg：", res);
		let video = res.data.list
		nextPage.value = res.data.nextPage;
		imgListThrea.value = imgListThrea.value.concat(video);
		console.log("所有的video：", imgListThrea.value);
	}
	// 下部图数据
	SwiperlistBImg(1, 9);

	// 已收藏的内容
	const userCollentFunction = async (userId, videoId) => {
		let res = await userCollent(userId, videoId);
		console.log("获取已收藏内容：", res);
	}


	// 推荐页面触底函数
	function onBottumLoading() {
		console.log("nextPage:", nextPage.value);
		if (nextPage.value > 0) {
			console.log("触底了")
			SwiperlistBImg(nextPage.value, 9);
		}

	}

	function onCollent(e) {
		console.log("onCollent:", e);

	}
</script>

<style scoped lang="scss">
	.swiper-topic-list {
		width: 100%;
		height: 90vh;

		.swiper-img {
			position: relative;
			width: 100%;

		}

		.image-eight-Three {
			padding: 20rpx 30rpx;
		}
	}
</style>